<template>
	<view class="content page" id="order_detail" style="padding-bottom: 0;" >
		<status-bar title='物流详情'></status-bar>
		<backTop v-if='toTop'></backTop>
		<view class="viewbox auto">
			<!-- 快递 start -->
			<view class="m-top20 d-flex j-sb a-center">
				<view>
					<view class="color_99 size26">收货人信息：</view>
					<view class="color_33 size26 m-top20">{{consignee_name}} {{consignee_tel}}</view>
					<view class="color_33 size26 m-top20">{{consignee_address}}</view>
				</view>
				<text class="iconfont icon-wuliu size60 color_ff4"></text>
			</view>
			<image :src="staticUrl+'/images/line.jpg'" mode="widthFix" class="rows"></image>
			
			
			<block v-if="Stash == 1">
			<!-- 自提 start -->
			<view class="store_addr redbors m-top20">
				<view class="r_addr_info">
					<view class="r_addr_info_t" @click="telPhone(detail.shopMobile)">{{detail.shopName?detail.shopName:shopName}}&nbsp;&nbsp;&nbsp;&nbsp;{{detail.shopMobile?detail.shopMobile:service_tel}}</view>
				</view>
			</view>
			<!-- 自提 end -->
			<p class="infobar2_t">备注信息</p>
			<view class="infobar2_c" v-if='detail.remarks'>{{detail.remarks}}</view>
			<view class="infobar2_c" v-else>无</view>
			</block>
		</view>
		
		
		
		<view class="logistics flex-box align-center" v-if='Stash == 1 &&  detail.courier_name  '>
			<view class="size28 color_33">{{detail.courier_name}}</view>
			<view class="logistics_num m-left20 m-right20">{{detail.courier_num}}</view>
			<text class="iconfont icon-fuzhi" @click="copy_text(detail.order_code)" v-if="detail.courier_num"></text>
		</view>
		<view class="rows p-left80 p-top30 size28 color_33" 
		     v-if="detail.deliveryInfo">{{detail.deliveryInfo}}</view>
		<view class="p-left30 p-right30 p-top20">
			<view class="logistics_list" v-for="(wl,index) in expressMsg" :key='index' v-show="index < 2 || !showMore">
				<view class="size28" :class="index ? 'color_99' : 'color_33'">{{wl.context}}</view>
				<view class="m-top10">{{wl.time}}</view>
			</view>
			
			<view class="flexac color_66 padding30" @click="showMore = !showMore" v-if="expressMsg.length > 2">
				<text class="size28 m-right10">{{ showMore ? '查看更多' : '收起' }}</text>
				<text class="iconfont size28" :class="showMore ? 'icon-xiangxia' : 'icon-xiangshang'"></text>
			</view>
		</view>
	</view>
</template>

<script>
	var that;
	export default{
		data(){
			return{
				toTop:false,
				navFixed:false,
				expressMsg:[],// 物流信息
				detail:'',// 订单详情
				shopName: uni.getStorageSync('startUp').shopName,
				service_tel: uni.getStorageSync('startUp').service_tel,
				staticUrl: this.staticUrl,
				showMore: true,
				order_id:'',
				adId:'',
				Stash:1,  // 订单物流 1 仓库物流 2
				id:'',
				
			}
		},
		
		onLoad(options) {
			that = this
			if(options.order_id) this.order_id = options.order_id;  // 订单id
			if(options.adId) this.adId = options.adId
			if(options.Stash) this.Stash = options.Stash
			if(options.id) this.id = options.id
			if(this.Stash == 1)this.orderDetails();
			this.Stash == 1?this.expressinfo():this.Stashexpressinfo();

		
		},
	
		methods:{
			orderDetails(){
				this.$showLoading('')
				this.$http.post({
					url: '/zzj_singleSaleApi/orderDetails',
					data: {
						order_id: this.order_id,
					}
				}).then(res => {
					this.$hideLoading()
					if(res.data){
						this.detail = res.data;
					}
				})
			},
			expressinfo(){
				this.$http.post({
					url: '/zzj_singleSaleApi/expressinfo',
					data: {
						order_id: this.order_id
					}
				}).then(res => {
					if(res.data){
						this.expressMsg = res.data || []
					}
				})
			},
			Stashexpressinfo(){
				this.$http.post({
					url:'/singleSaleWarehouseApi/expressinfo',
					data:{
						id:this.id,
					}
				}).then(res=>{
					if(res.code != 100) return;
					const result = res.data || [];
					const orderInfo = res.orderInfo;
					this.expressMsg = result;
					this.detail = orderInfo.deliveryUserInfo;
				})
			},
			telPhone:function(phoneNumber){
				uni.makePhoneCall({
					phoneNumber:phoneNumber
				})
			},
			copy_text:function(copyData){
				uni.setClipboardData({
					data: copyData,
					success: function () {
						uni.showToast({
							title:"订单编号复制成功",
							icon:"success"
						})
					}
				})
			}
		},
		computed:{
			consignee_name(){
				if(!this.detail) return;
				return this.detail.uname || this.detail.own_name
			},
			consignee_tel(){
				if(!this.detail) return;
				return this.detail.utel || this.detail.own_phone
			},
			consignee_address(){
				if(!this.detail) return;
				return this.detail.address || this.detail.own_address
			}
		},
		onShareAppMessage(option) {
			let shareData = uni.getStorageSync('shareData');
			let vid = uni.getStorageSync('vid');
			return {
				title: shareData.title,
				desc: shareData.desc,
				path: '/pages/index/index?share_v_id=' + vid,
				imageUrl: shareData.imageUrl
			}
		},
		onPageScroll(e){
			if(e.scrollTop > 200){
				that.toTop = true;
			} else {
				that.toTop = false
			}
			if(e.scrollTop > 583){
				that.navFixed = true
			} else {
				that.navFixed = false
			}
		},
	}
</script>

<style scoped lang="scss">
	.logistics{
		border-radius: 10px;
		padding: 30upx;
		background-position-x: 30upx;
		&::after{
			right: 30upx;
		}
	}
	
	.logistics_list{
		line-height: 40upx;
		color: #999999;
		// overflow: hidden;
		position: relative;
		padding-left: 50upx;
		padding-bottom: 30upx;
	}
	
	.logistics_addr image{
		width: 100%;
	}
	
	.logistics_addr image{
		width: 100%;
		
	}
	.logistics:after{
		display: none;
	}
	.logistics_item{
		border-radius: 10px;
	
		padding: 30rpx;
		background: #FFFFFF;
	}
	.logistics_list:after{
		content: '';
		width: 2upx;
		height: 93%;
		background: #F2F2F2;
		position: absolute;
		left: 10upx;
		bottom: -10upx;
	}
	.logistics_list:before{
		content: '';
		width: 20upx;
		height:20upx;
		background: #E5E5E5;
		border-radius: 100%;
		position: absolute;
		left: 0;
		top: 10upx;
		z-index: 5;
	}
	.logistics_list:first-child:before{
		background: #ff4b4e !important;
	}
</style>
